<template>
	<view class="login">
		<view class="nav_bar">
			<u-navbar title="会员登录" :autoBack="true"></u-navbar>
		</view>
		<view class="login-container">
			<view class="title">
				<view class="login-phone">手机号登录</view>
				<view class="login-desc">未注册的手机号登录后将自动注册</view>
			</view>
			<view class="login-form">
				<u--form :model="form" ref="uForm">
					<u-form-item prop="mobile">
						<u-input
							type="number"
							placeholder="请输入手机号码"
							v-model.trim="form.mobile"
							border="bottom" />
					</u-form-item>
					<u-form-item prop="userCode">
						<u-input
							type="number"
							placeholder="请输入图形验证码"
							v-model.trim="form.userCode"
							border="bottom">
							<template slot="suffix">
								<image
									v-if="form.picUrl"
									class="login-base64"
									:src="form.picUrl"
									mode="widthFix"
									@tap="handleImgChange"></image>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="smsCode">
						<!-- #ifndef APP-NVUE -->
						<u-input v-model="form.smsCode" border="bottom" placeholder="请输入短信验证码">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.smsCode" border="bottom" placeholder="请输入短信验证码">
						<!-- #endif -->
							<template slot="suffix">
								<button
									class="get-code-btn"
									:disabled="second !== totalSecond"
									@tap="handleGetCode">{{ second === totalSecond ? '获取验证码' : `重新发送(${second})秒` }}</button>
							</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</u-form-item>
				</u--form>
				<button
					class="login-form-btn"
					@tap="handleSubmit">登 录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	import { getPicCode, getMsgCode, codeLogin } from '@/api/login'

	export default {
		name: 'loginIndex',
		data () {
			return {
				form: {
					mobile: '13521016268', // 手机号
					picUrl: '', // 存储请求渲染的图片地址
					picKey: '', // 将来请求传递的图形验证码唯一标识
					userCode: '', // 图形验证码
					smsCode: '246810' // 短信验证码
				},
				totalSecond: 60, // 总秒数
				second: 60, // 当前秒数，开定时器对 second--
				timer: null // 定时器 id
			}
		},
		onShow () {
			this.getCode()
		},
		methods: {
			...mapMutations('user', ['updateUserInfo']),
			// 获取base64图片地址
			async getCode () {
				const { base64, key } = await getPicCode()
				this.form.picUrl = base64
				this.form.picKey = key
			},
			// 更新base64图片地址
			handleImgChange () {
				this.getCode()
			},
			// 验证表单
			valideFn () {
				if (!/^1[3-9]\d{9}$/.test(this.form.mobile)) {
					this.$u.toast('请输入正确的手机号')
					return false
				}
				if (!/^\w{4}$/.test(this.form.userCode)) {
					this.$u.toast('请输入正确的图形验证码')
					return false
				}
				return true
			},
			// 获取短信验证码
			async handleGetCode () {
				if (!this.valideFn()) {
				    return
				}
				if (!this.timer && this.second === this.totalSecond) {
					await getMsgCode({
						captchaCode: this.userCode,
						captchaKey: this.picKey,
						mobile: this.mobile
					})
					this.$u.toast('短信发送成功，注意查收^_^')
					this.timer = setInterval(() => {
					    // 倒计时-1
					    this.second--
					    // 判断小于0时，重置并清空定时器且定时器时间归位
					    if (this.second < 1) {
					        clearInterval(this.timer)
					        this.timer = null
					        this.second = this.totalSecond
					    }
					}, 1000)
				}
			},
			// 登录
			async handleSubmit () {
				const that = this
				if (!this.valideFn()) {
					return
				}
				if (!/^\d{6}$/.test(this.form.smsCode)) {
					this.$u.toast('短信验证码错误')
					return
				}
				const res = await codeLogin({
					mobile: this.form.mobile,
					smsCode: this.form.smsCode
				})
				this.updateUserInfo({
					data: res,
					callback: function () {
						that.$u.toast('登录成功')
						uni.switchTab({
							url: '/pages/home/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.login {
	.nav_bar {
		height: 182rpx;
		/deep/ .u-navbar {
			.u-navbar__content__left {
				.u-icon__icon {
					font-size: 30rpx!important;
					color: #333!important;
				}
			}
		}
	}
	.login-container {
		padding: 98rpx 58rpx;
		.title {
		    margin-bottom: 40rpx;
		    .login-phone {
				font-size: 52rpx;
				font-weight: normal;
		    }
		    .login-desc {
				line-height: 80rpx;
				font-size: 28rpx;
				color: #b8b8b8;
		    }
		}
		.login-form {
			/deep/ .u-form {
				.u-input__content {
					.u-input__content__subfix-icon {
						.login-base64 {
							width: 188rpx;
							height: 62rpx;
						}
						.get-code-btn {
							background-color: transparent!important;
							border-radius: 0rpx!important;
							color: #cea26a!important;
							font-size: 26rpx;
							padding-left: 0rpx!important;
							padding-right: 0px!important;
							&::after {
								border: none!important;
								border-radius: 0rpx!important;
							}
						}
					}
				}
			}
			.login-form-btn {
				width: 100%!important;
				height: 84rpx!important;
				margin-top: 78rpx;
				background: linear-gradient(90deg, #ecb53c, #ff9211);
				color: #fff;
				border-radius: 78rpx;
				box-shadow: 0 20rpx 40rpx 0 rgba(0,0,0,.1);
				letter-spacing: 4rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>
